<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" xmlns:th="http://www.thymeleaf.org">
    <title>新增用户信息</title>
    <script type="text/javascript" src="/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="/js/vue.js"></script>
</head>
<body>
<div id="myApp">
    <h4>新增用户</h4>
    <hr/>
    <div>
        <form action="">
            <div>
                ID：<input type="text" v-model="user.userId" disabled placeholder="自动生成">
            </div>
            <div>
                用户名：<input type="text" v-model="user.userName" placeholder="请输入用户名">
            </div>
            <div>
                性别：<input type="text" v-model="user.sex" placeholder="请输入性别">
            </div>
            <div>
                年龄：<input type="text" v-model="user.age" placeholder="请输入年龄">
            </div>
            <div>
                住址：<input type="text" v-model="user.address" placeholder="请输入住址">
            </div>
            <button type="button" @click="addUser">新增用户</button>
        </form>
    </div>
</div>
</body>
<script>
    new Vue({
        el: "#myApp",
        data: {
            user: {
                userId: null,
                userName: null,
                sex: null,
                age: null,
                address: null
            }
        },
        methods: {
            addUser: function () {
                var self = this;
                $.ajax({
                    // 请求地址
                    url: "/user/addUser",
                    type: "post",
                    // post提交方式需要指定请求体类型
                    contentType: "application/x-www-form-urlencoded",
                    // 传入的数据
                    data: self.user,
                    // 返回的数据类型
                    dataType: "json",
                    // 返回的数据
                    success: function (data) {
                        console.log(data);
                        if ("成功" == data.info) {
                            alert("新增用户成功，单击【确定】回到列表");
                            window.location.href = "/"
                        } else {
                            alert(data.info);
                        }
                    }
                })
            }
        }
    })
</script>
</html>